<template>
  <view class="tilt" :style="{ display: props.callOut ? 'block' : 'none', top: props.top }">
    <view class="call-out-box" :style="{ height: props.height }">
      <view class="body">
        <view class="content">
          <div class="option">
            <view v-for="(surveyItem, index) in questionnaireTemp" :key="index" class="survey-item">
              <span class="option-name">{{ surveyItem.label }}：</span>
              <view class="option-values">
                <view
                  class="option-value"
                  v-for="(option, i) in surveyItem.options"
                  :key="i"
                  @click="clickOption(surveyItem, option)"
                  :class="{ action: isActive(surveyItem, option) }"
                >
                  {{ option.label }}
                </view>
              </view>
            </view>
          </div>
        </view>
      </view>
      <view class="control">
        <span class="control-button cancel" @click="setVisible(false)">取消</span>
        <span class="control-button complete" @click="confirm">完成</span>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import type { SurveyItem, Result, Option } from './type'
const props = defineProps({
  top: {
    type: String,
    require: true
  },
  height: {
    type: String,
    require: true
  },
  callOut: {
    type: Boolean,
    default: false
  },
  questionnaire: {
    type: Array<SurveyItem>,
    default: []
  }
})
const questionnaireTemp = ref<Array<SurveyItem>>()
// 监听调起，维护questionnaireTemp的值
watch(
  () => props.callOut,
  (newVal: boolean) => {
    if (newVal === true) {
      questionnaireTemp.value = JSON.parse(JSON.stringify(props.questionnaire))
    }
  }
)
const emits = defineEmits<{
  (e: 'confirm'): void
  (e: 'update:call-out', isVisible: boolean): void
}>()
function setVisible(isVisible: boolean) {
  emits('update:call-out', isVisible)
}
function confirm() {
  props.questionnaire.forEach((item, index) => {
    if (questionnaireTemp.value == null) return
    item.value = questionnaireTemp.value[index].value
  })
  setVisible(false)
  emits('confirm')
}
const isActive = (surveyItem: SurveyItem, option: Option) => {
  if (!surveyItem.isMultipleChoice) {
    return surveyItem.value === option.value
  } else {
    const values = surveyItem.value as Array<number | string>
    return values != null && values.includes(option.value)
  }
}
function clickOption(surveyItem: SurveyItem, option: Option) {
  if (surveyItem.isMultipleChoice) {
    // 是多选
    const values = surveyItem.value
    if (isActive(surveyItem, option)) {
      surveyItem.value = (values! as Array<any>).filter((_value) => _value !== option.value)
    } else {
      ;(surveyItem.value as Array<number | string>)?.push(option.value)
    }
  } else {
    // 是单选
    if (surveyItem.value !== option.value) {
      surveyItem.value = option.value
    } else {
      surveyItem.value = null
    }
  }
}
</script>

<style scoped lang="scss">
$control-height: 120rpx;

.tilt {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(0 0 0 / 30%);
}

.call-out-box {
  position: relative;
  display: flex;
  width: 100vw;
  border-bottom: 1px solid #868686;

  // border-bottom-left-radius: 30rpx;
  // border-bottom-right-radius: 30rpx;
  background-color: #fff;
  flex-direction: column;

  .body {
    position: absolute;
    inset: 0 0 $control-height;
    background-color: #f5f5f5;
    flex-grow: 1;
  }

  .control {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: $control-height;
    box-sizing: border-box;

    > .control-button {
      display: inline-block;
      margin: 0 20rpx;
      padding: 0rpx 50rpx;
      line-height: $control-height * 0.6;
      height: $control-height * 0.6;
      font-size: 30rpx;
    }

    > .cancel {
      background-color: #f5f5f5;
    }

    > .complete {
      background-color: #ffd350;
    }
  }
}

.survey-item {
  display: flex;
  padding: 15rpx;
  width: 100%;
  flex-direction: column;
  box-sizing: border-box;

  .option-name {
    margin: 15rpx 0 20rpx 15rpx;
    font-size: 35rpx;
    font-weight: 700;
  }

  .action {
    background-color: #ffd350 !important;
  }

  .option-values {
    > .option-value {
      display: inline-block;
      margin: 8rpx;
      padding: 12rpx 25rpx;
      font-size: 26rpx;
      border-radius: 10rpx;
      background-color: #fff;
    }
  }
}
</style>
